<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星巴克 | 用每一杯咖啡传递星巴克</title>
    <link rel="stortcut icon" href="images/favicon.ico">
    <link rel="stylesheet" href="CSS/starbucks.css">
</head>

<body>
    <header>
        <nav>
            <div>
                <div class="logo"></div>
                <a href="#">门店</a>
                <a href="#">我的账单</a>
                <a href="#">菜单</a>
            </div>
            <img src="images/icon-hamburger.svg" alt="">
        </nav>
        <article>
            <h1>心情惬意，来杯咖啡吧 ☕</h1>
            <div>
                <img src="images/icon-account.svg" alt="">
                <a href="#">登录</a>
                <a href="#">注册</a>
            </div>
        </article>
    </header>
    <div id="content">
        <div class="ad">
            <img src="images/banner_l.jpg" alt="">
            <img src="images/banner_s.jpg" alt="">
            <p>广告</p>
        </div>
        <div class="pic sd_l">
            <a href="#"><img src="images/tmall-2020-06-29-zh.jpg" alt="" class="shadow"></a>
            <a href="#"><img src="images/starbucks-design-studio-web-china.jpg" alt="" class="shadow"></a>
            <a href="#"><img src="images/homepage-career-cn.jpg" alt="" class="shadow"></a>
        </div>
        <div class="sd_l">
            <div>
                <div>
                    <p>星享俱乐部</p>
                    <p>开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。<a href="#" class="brown">了解更多></a></p>
                    <div>
                        <a href="#">注册</a>
                        <a href="#">登录</a>
                    </div>
                </div>
                <img src="images/logo-msr-20210601.svg" alt="">
            </div>
        </div>
        <div class="sd_l">
            <div class="container">
                <p class="title">星巴克精选</p>
                <p class="gray">在星巴克天猫旗舰店发现更多咖啡心意</p>
                <div>
                    <div class="shadow">
                        <img src="images/tmall-card-01-update.png" alt="">
                        <p>会员星礼包</p>
                        <p>星享卡新升级</p>
                        <p>更多心意好礼</p>
                        <a href="#" class="brown">了解更多></a>
                    </div>
                    <div class="shadow">
                        <img src="images/tmall-card-02.png" alt="">
                        <p>星礼卡</p>
                        <p>用一份心礼</p>
                        <p>让心意相随</p>
                        <a href="#" class="brown">了解更多></a>
                    </div>
                    <div class="shadow">
                        <img src="images/tmall-eticket.png" alt="">
                        <p>电子产品券</p>
                        <p>心意</p>
                        <p>从这一杯开始</p>
                        <a href="#" class="brown">了解更多></a>
                    </div>
                    <div class="shadow">
                        <img src="images/tmall-reserve.png" alt="">
                        <p>咖啡生活</p>
                        <p>星巴克</p>
                        <p>用心之作</p>
                        <a href="#" class="brown">了解更多></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="sd_l">
            <div>
                <p class="title">1912 派克街 | 咖啡星讲堂</p>
                <p class="gray">了解更多星巴克咖啡文化</p>
                <div class="container" id="cafe">
                    <div class="shadow">
                        <img src="images/coffeehouse-coffee-cultivation-kv.jpg" alt="">
                        <p>咖啡的起源与培植</p>
                    </div>
                    <div class="shadow">
                        <img src="images/coffeehouse-4-fundamentals-kv.jpg" alt="">
                        <p>咖啡调制</p>
                    </div>
                    <div class="shadow">
                        <img src="images/coffeehouse-roast-story-kv.jpg" alt="">
                        <p>咖啡烘焙</p>
                    </div>
                    <div class="shadow">
                        <img src="images/coffeehouse-pour-over-kv.jpg" alt="">
                        <p>手冲咖啡</p>
                    </div>
                </div>
                <div class="btn">
                    <img src="images/icon-scroll-left.svg" alt="">
                </div>
                <div class="btn">
                    <img src="images/icon-scroll-right.svg" alt="">
                </div>
                <div>
                    <img src="images/icpicon.png" alt="">
                    <p> 沪公网安备 31010402000253号 | 沪ICP备17003747号</p>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div>
            <div class="ft">
                <img src="images/icon-home-active.svg" alt="">
                <p>主页</p>
            </div>
            <div class="ft">
                <img src="images/icon-stores.svg" alt="">
                <p>门店</p>
            </div>
            <div class="ft">
                <img src="images/icon-account.svg" alt="">
                <p>我的账户</p>
            </div>
            <div class="ft">
                <img src="images/icon-menu.svg" alt="">
                <p>菜单</p>
            </div>
            <div class="ft">
                <img src="images/icon-more.svg" alt="">
                <p>更多</p>
            </div>
        </div>
    </footer>


    <script>
        var btn = document.querySelectorAll(".btn");
        var cafe = document.querySelector("#cafe");
        var num = 1;
        btn[0].onclick = function () {
            cafe.style.transform = "translateX(-" + 125 * num + "px)";
            if(num==0){
                num=2;
                btn[0].style.display="none";
                btn[1].style.display="block";
            }
            num--;
        }
        btn[1].onclick = function () {
            cafe.style.transform = "translateX(-" + 125 * num + "px)";
            if(num==2){
                num=0;
                btn[0].style.display="block";
                btn[1].style.display="none";
            }
            num++;
        }
        
    </script>
</body>

</html>